<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D变换</title>
</head>
<body>
    <div class="container">
        <div class="cube">
          <div class="face front">xuan</div>
          <div class="face back">xuan</div>
          <div class="face right">xuan</div>
          <div class="face left">xuan</div>
          <div class="face top">xuan</div>
          <div class="face bottom">xuan</div>
        </div>
      </div>
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <p>前</p>
          </div>
          <div class="flip-card-back">
            <p>后</p>
          </div>
        </div>
      </div>
</body>
<style>
    body{
        background-image: url(./背景11.jpg);
        background-size: 100%;
    }
    .container {
      width: 200px;
      height: 200px;
      margin: 100px;
      perspective: 1000px; 
    }
  
    .cube {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d; /* 子元素将相对于3D空间定位 */
      transform: rotateX(30deg) rotateY(45deg); 
      transition: transform 1s; 
    }
  
    .cube:hover {
      transform: rotateX(30deg) rotateY(45deg) rotateZ(360deg); /* 绕Z轴旋转 */
    }
  
    .face {
      position: absolute;
      width: 200px;
      height: 200px;
      background: rgba(248, 7, 7, 0.6);
      border: 1px solid #ccc;
    }
  
    .front  { transform: translateZ(100px); } /* 前面 */
    .back   { transform: rotateY(180deg) translateZ(100px); } /* 后面 */
    .right  { transform: rotateY(90deg) translateZ(100px); } /* 右侧 */
    .left   { transform: rotateY(-90deg) translateZ(100px); } /* 左侧 */
    .top    { transform: rotateX(90deg) translateZ(100px); } /* 顶部 */
    .bottom { transform: rotateX(-90deg) translateZ(100px); } /* 底部 */
  
    .front, .back {
      box-sizing: border-box;
      border: none;
    }
    .flip-card {
    width: 200px;
    height: 200px;
    perspective: 1000px; 
  }

  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d; /* 子元素将相对于3D空间定位 */
  }

  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg); 
  }

  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; 
    border: 1px solid #ccc;
    background-color: rgb(27, 2, 250);
  }

  .flip-card-front {
    z-index: 2;
  }

  .flip-card-back {
    transform: rotateY(180deg); 
    z-index: 1;
  }
  </style>
</html>